<template>
  <div class="customer-material">
    <!-- 顶部搜索区 -->
    <div class="search-bar">
      <div class="search-inputs">
        <el-input
          v-model="customerSearch"
          placeholder="客户"
          clearable
          style="width: 200px; margin-right: 10px"
        />
        <el-input
          v-model="productSearch"
          placeholder="商品"
          clearable
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="handleSearch">查询</el-button>
      </div>
      
      
      <div class="action-buttons">
        <el-button type="primary" @click="handleAdd">新增</el-button>
        <el-button @click="handleImport">导入</el-button>
        <el-button @click="handleExport">导出</el-button>
        <el-button @click="handleDelete" :disabled="!selectedItems.length">删除</el-button>
      </div>
    </div>

    <!-- 主表格区 -->
    <div class="main-table">
      <el-table
        :data="tableData"
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
      >
        <!-- 多选框列 -->
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        
        <!-- 操作列 -->
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope" >
            <el-button type="text" size="small" @click="handleEdit(scope.row)" style="padding: 0px 0px;">编辑</el-button>
            <el-button type="text" size="small" @click="handleSingleDelete(scope.row)"  style="padding: 0px 0px;">删除</el-button>
          </template>
        </el-table-column>
        
        <!-- 客户信息列 -->
        <el-table-column prop="customer" label="客户" width="150">
          <template #default="scope">
            <span>{{ scope.row.customerCode }} {{ scope.row.customerName }}</span>
          </template>
        </el-table-column>
        
        <!-- 商品信息列 -->
        <el-table-column prop="product" label="商品" width="150">
          <template #default="scope">
            <span>{{ scope.row.productCode }} {{ scope.row.productName }}</span>
          </template>
        </el-table-column>
        
        <!-- 单位列 -->
        <el-table-column prop="unit" label="单位" width="100" />
        
        <!-- 属性列 -->
        <el-table-column prop="attribute" label="属性" width="120" />
        
        <!-- 客户物料信息列 -->
        <el-table-column prop="customerMaterialCode" label="客户物料编码" width="150" />
        <el-table-column prop="customerMaterialName" label="客户物料名称" width="150" />
        <el-table-column prop="customerMaterialSpec" label="客户物料规格" width="150" />
        <el-table-column prop="customerMaterialBarcode" label="客户物料条码" width="150" />
        <el-table-column prop="customerMaterialUnit" label="客户物料单位" width="150" />
        
        <!-- 备注列 -->
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </div>

    <!-- 分页区 -->
    <div class="pagination">
      <span class="total">共{{ totalItems }}条</span>
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        layout="prev, pager, next"
        @current-change="handlePageChange"
      />
      <span class="page-size">{{ pageSize }}条/页</span>
      <span class="current-range">当前{{ (currentPage - 1) * pageSize + 1 }} - {{ Math.min(currentPage * pageSize, totalItems) }} 共{{ totalItems }}条</span>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'CustomerMaterial',
  setup() {
    // 搜索条件
    const customerSearch = ref('')
    const productSearch = ref('')
    
    // 分页
    const currentPage = ref(1)
    const pageSize = ref(100)
    const totalItems = ref(3)
    
    // 选中的项目
    const selectedItems = ref([])
    
    // 表格数据
    const tableData = reactive([
      {
        customerCode: '1000001',
        customerName: '客户2',
        productCode: 'SP0001',
        productName: '巧克力',
        unit: '盒',
        attribute: '',
        customerMaterialCode: 'WS000025',
        customerMaterialName: '',
        customerMaterialSpec: '',
        customerMaterialBarcode: '',
        customerMaterialUnit: '',
        remark: ''
      },
      {
        customerCode: '1000001',
        customerName: '客户2',
        productCode: 'SP0002',
        productName: '果味饮料',
        unit: '',
        attribute: '',
        customerMaterialCode: 'WS000026',
        customerMaterialName: '',
        customerMaterialSpec: '',
        customerMaterialBarcode: '',
        customerMaterialUnit: '',
        remark: ''
      },
      {
        customerCode: '1000001',
        customerName: '客户2',
        productCode: 'SP0003',
        productName: '脆饼',
        unit: '包',
        attribute: '',
        customerMaterialCode: 'WS000027',
        customerMaterialName: '',
        customerMaterialSpec: '',
        customerMaterialBarcode: '',
        customerMaterialUnit: '',
        remark: ''
      }
    ])
    
    // 方法
    const handleSearch = () => {
      currentPage.value = 1
      // 这里添加搜索逻辑
    }
    
    const handleSelectionChange = (selection) => {
      selectedItems.value = selection
    }
    
    const handleAdd = () => {
      console.log('新增客户物料编码')
    }
    
    const handleEdit = (row) => {
      console.log('编辑客户物料编码:', row)
    }
    
    const handleDelete = () => {
      if (selectedItems.value.length === 0) return
      console.log('删除选中的客户物料编码:', selectedItems.value)
    }
    
    const handleSingleDelete = (row) => {
      console.log('删除单个客户物料编码:', row)
    }
    
    const handleImport = () => {
      console.log('导入客户物料编码')
    }
    
    const handleExport = () => {
      console.log('导出客户物料编码')
    }
    
    const handlePageChange = (val) => {
      currentPage.value = val
      // 这里添加分页逻辑
    }
    
    return {
      customerSearch,
      productSearch,
      currentPage,
      pageSize,
      totalItems,
      selectedItems,
      tableData,
      handleSearch,
      handleSelectionChange,
      handleAdd,
      handleEdit,
      handleDelete,
      handleSingleDelete,
      handleImport,
      handleExport,
      handlePageChange
    }
  }
}
</script>

<style scoped>
.customer-material {
  height: 100vh;
  background-color: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.search-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-inputs {
  display: flex;
  align-items: center;
}

.title-section {
  flex: 1;
  text-align: center;
}

.title {
  font-size: 16px;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.main-table {
  flex: 1;
  overflow: hidden;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 20px;
}

.total {
  margin-right: 20px;
  font-size: 14px;
  color: #606266;
}

.page-size {
  margin-left: 20px;
  font-size: 14px;
  color: #606266;
}

.current-range {
  margin-left: 20px;
  font-size: 14px;
  color: #606266;
}

.el-table {
  border: 1px solid #e6e6e6;
}

.el-table::before {
  height: 0;
}
</style>